JavaScript-suorituskyvyn optimointi: Koodin pilkkominen vs. laiska arviointi

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      Ladataan...
}>
        
      
    

Tässä esimerkissä OtherComponent ladataan vasta, kun se renderöidään. Sen latautuessa käyttäjä näkee viestin "Ladataan...".

Työkalut koodin pilkkomiseen

• Webpack: Suosittu moduulien paketointityökalu (module bundler), joka tukee useita koodin pilkkomistekniikoita.
• Rollup: Toinen moduulien paketointityökalu, joka keskittyy pienten ja tehokkaiden pakettien luomiseen.
• Parcel: Nollakonfiguraation paketointityökalu, joka hoitaa koodin pilkkomisen automaattisesti.
• Vite: Rakennustyökalu (build tool), joka hyödyntää natiiveja ES-moduuleja nopeaan kehitykseen ja optimoituihin tuotantoversioihin.

Laiska arviointi: Laskennan viivästyttäminen

Mitä on laiska arviointi?

Laiska arviointi (lazy evaluation), joka tunnetaan myös nimellä viivästetty arviointi, on ohjelmointitekniikka, jossa lausekkeen arviointi viivästetään, kunnes sen arvoa todella tarvitaan. Toisin sanoen laskutoimitukset suoritetaan vain, kun niiden tuloksia vaaditaan, sen sijaan että ne laskettaisiin innokkaasti etukäteen.

Kuvittele, että valmistat monen ruokalajin ateriaa. Et valmistaisi kaikkia ruokia kerralla. Sen sijaan valmistaisit kunkin ruokalajin vasta, kun on aika tarjoilla se. Laiska arviointi toimii samalla tavalla, suorittaen laskutoimitukset vain silloin, kun niiden tuloksia tarvitaan.

Miten laiska arviointi toimii?

JavaScriptissa laiska arviointi voidaan toteuttaa useilla tekniikoilla:

• Funktiot: Lausekkeen kääriminen funktioon mahdollistaa sen arvioinnin viivästyttämisen, kunnes funktio kutsutaan.
• Generaattorit: Generaattorit tarjoavat tavan luoda iteraattoreita, jotka tuottavat arvoja tarpeen mukaan.
• Memoisaatio: Memoisaatio tarkoittaa kalliiden funktiokutsujen tulosten tallentamista välimuistiin ja välimuistissa olevan tuloksen palauttamista, kun samat syötteet esiintyvät uudelleen.
• Proxyt: Proxyja voidaan käyttää sieppaamaan ominaisuuksien käyttöpyyntöjä ja viivästyttämään ominaisuuksien arvojen laskentaa, kunnes niitä todella käytetään.

Laiskan arvioinnin edut

• Parempi suorituskyky: Viivästyttämällä tarpeettomia laskutoimituksia laiska arviointi voi merkittävästi parantaa suorituskykyä, erityisesti käsiteltäessä suuria tietomääriä tai monimutkaisia laskelmia.
• Vähentynyt muistinkäyttö: Laiska arviointi voi vähentää muistinkäyttöä välttämällä sellaisten väliarvojen luomista, joita ei tarvita välittömästi.
• Lisääntynyt reagoivuus: Välttämällä tarpeettomia laskutoimituksia alkuperäisen latauksen aikana laiska arviointi voi lisätä sovelluksen reagoivuutta.
• Äärettömät tietorakenteet: Laiska arviointi mahdollistaa työskentelyn äärettömien tietorakenteiden, kuten äärettömien listojen tai virtojen, kanssa laskemalla vain tarvittavat elementit tarpeen mukaan.

Esimerkki: Kuvien laiska lataus (Lazy Loading)

Yleinen käyttötapaus laiskalle arvioinnille on kuvien laiska lataus. Sen sijaan, että kaikki sivun kuvat ladattaisiin etukäteen, voit viivästyttää niiden kuvien lataamista, jotka eivät ole alun perin näkyvissä näkymäalueella (viewport). Tämä voi merkittävästi parantaa sivun alkuperäistä latausaikaa ja vähentää verkon kaistanleveyden kulutusta.

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach((img) => {
    observer.observe(img);
  });
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

Tämä esimerkki käyttää IntersectionObserver-APIa havaitsemaan, milloin kuva tulee näkymäalueelle. Kun kuva on näkyvissä, sen src-attribuutti asetetaan sen data-src-attribuutin arvoon, mikä käynnistää kuvan latautumisen. Tämän jälkeen tarkkailija lopettaa kuvan tarkkailun estääkseen sen lataamisen uudelleen.

Esimerkki: Memoisaatio

Memoisaatiota voidaan käyttää kalliiden funktiokutsujen optimointiin. Tässä on esimerkki:

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func(...args);
    cache[key] = result;
    return result;
  };
}

function expensiveCalculation(n) {
  // Simuloidaan aikaa vievää laskentaa
  for (let i = 0; i < 100000000; i++) {
    // Tehdään jotain
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('Ensimmäinen kutsu');
console.log(memoizedCalculation(5)); // Ensimmäinen kutsu - vie aikaa
console.timeEnd('Ensimmäinen kutsu');

console.time('Toinen kutsu');
console.log(memoizedCalculation(5)); // Toinen kutsu - palauttaa välimuistissa olevan arvon välittömästi
console.timeEnd('Toinen kutsu');

Tässä esimerkissä memoize-funktio ottaa syötteenä funktion ja palauttaa siitä memoisoidun version. Memoitu funktio tallentaa aiempien kutsujen tulokset välimuistiin, jotta myöhemmät kutsut samoilla argumenteilla voivat palauttaa välimuistissa olevan tuloksen suorittamatta alkuperäistä funktiota uudelleen.

Koodin pilkkominen vs. laiska arviointi: Keskeiset erot

Vaikka sekä koodin pilkkominen että laiska arviointi ovat tehokkaita optimointitekniikoita, ne käsittelevät eri suorituskyvyn osa-alueita:

• Koodin pilkkominen: Keskittyy pienentämään alkuperäistä pakettikokoa jakamalla koodin pienempiin osiin ja lataamalla ne tarpeen mukaan. Sitä käytetään pääasiassa parantamaan sivun alkuperäistä latausaikaa.
• Laiska arviointi: Keskittyy arvojen laskennan viivästyttämiseen, kunnes niitä todella tarvitaan. Sitä käytetään pääasiassa parantamaan suorituskykyä käsiteltäessä kalliita laskutoimituksia tai suuria tietomääriä.

Pähkinänkuoressa, koodin pilkkominen vähentää etukäteen ladattavan koodin määrää, kun taas laiska arviointi vähentää etukäteen suoritettavan laskennan määrää.

Milloin käyttää koodin pilkkomista vs. laiskaa arviointia?

Koodin pilkkominen

• Suuret sovellukset: Käytä koodin pilkkomista sovelluksissa, joissa on suuri määrä JavaScript-koodia, erityisesti niissä, joissa on useita reittejä tai ominaisuuksia.
• Alkuperäisen latausajan parantaminen: Käytä koodin pilkkomista parantamaan sivun alkuperäistä latausaikaa ja lyhentämään aikaa interaktiivisuuteen (time to interactive).
• Verkon kaistanleveyden vähentäminen: Käytä koodin pilkkomista vähentämään verkon yli siirrettävän datan määrää.

Laiska arviointi

• Kalliit laskutoimitukset: Käytä laiskaa arviointia funktioille, jotka suorittavat kalliita laskutoimituksia tai käsittelevät suuria tietomääriä.
• Reagoivuuden parantaminen: Käytä laiskaa arviointia parantamaan sovelluksen reagoivuutta viivästyttämällä tarpeettomia laskutoimituksia alkuperäisen latauksen aikana.
• Äärettömät tietorakenteet: Käytä laiskaa arviointia työskennellessäsi äärettömien tietorakenteiden, kuten äärettömien listojen tai virtojen, kanssa.
• Median laiska lataus: Toteuta laiska lataus kuville, videoille ja muille mediasisällöille parantaaksesi sivun latausaikoja.

Koodin pilkkomisen ja laiskan arvioinnin yhdistäminen

Monissa tapauksissa koodin pilkkominen ja laiska arviointi voidaan yhdistää vielä suurempien suorituskykyetujen saavuttamiseksi. Voit esimerkiksi käyttää koodin pilkkomista jakaaksesi sovelluksesi pienempiin osiin ja sitten käyttää laiskaa arviointia viivästyttääksesi arvojen laskentaa näiden osien sisällä.

Ajatellaan verkkokauppasovellusta. Voisit käyttää koodin pilkkomista jakaaksesi sovelluksen erillisiin paketteihin tuotelistaussivulle, tuotetietosivulle ja kassasivulle. Sitten tuotetietosivun sisällä voisit käyttää laiskaa arviointia viivästyttääksesi kuvien lataamista tai tuotesuositusten laskemista, kunnes niitä todella tarvitaan.

Koodin pilkkomisen ja laiskan arvioinnin lisäksi: Muita optimointitekniikoita

Vaikka koodin pilkkominen ja laiska arviointi ovat tehokkaita tekniikoita, ne ovat vain kaksi palaa palapelissä, kun on kyse JavaScript-suorituskyvyn optimoinnista. Tässä on joitain lisätekniikoita, joita voit käyttää suorituskyvyn parantamiseen entisestään:

• Minifiointi: Poista tarpeettomat merkit (esim. välilyönnit, kommentit) koodistasi sen koon pienentämiseksi.
• Pakkaaminen: Pakkaa koodisi työkaluilla, kuten Gzip tai Brotli, pienentääksesi sen kokoa entisestään.
• Välimuisti: Hyödynnä selaimen välimuistia ja CDN-välimuistia vähentääksesi palvelimellesi tehtävien pyyntöjen määrää.
• Tree Shaking (koodin ravistelu): Poista käyttämätön koodi paketeistasi niiden koon pienentämiseksi.
• Kuvien optimointi: Optimoi kuvat pakkaamalla ne, muuttamalla niiden kokoa sopiviin mittoihin ja käyttämällä moderneja kuvamuotoja, kuten WebP.
• Debouncing ja Throttling: Hallitse tapahtumankäsittelijöiden suoritustiheyttä estääksesi suorituskykyongelmia.
• Tehokas DOM-manipulaatio: Minimoi DOM-manipulaatiot ja käytä tehokkaita DOM-manipulaatiotekniikoita.
• Web Workerit: Siirrä laskennallisesti raskaat tehtävät Web Workereille estääksesi niitä tukkimasta pääsäiettä.

Yhteenveto

JavaScript-suorituskyvyn optimointi on olennainen osa positiivisen käyttökokemuksen tarjoamista ja liiketoiminnallisten tavoitteiden saavuttamista. Koodin pilkkominen ja laiska arviointi ovat kaksi tehokasta tekniikkaa, jotka voivat merkittävästi parantaa suorituskykyä lyhentämällä alkuperäisiä latausaikoja, vähentämällä verkon kaistanleveyden kulutusta ja viivästyttämällä tarpeettomia laskutoimituksia. Ymmärtämällä, miten nämä tekniikat toimivat ja milloin niitä kannattaa käyttää, voit luoda nopeampia, reagoivampia ja nautittavampia verkkosovelluksia.

Muista ottaa huomioon sovelluksesi erityisvaatimukset ja käyttää tarpeisiisi parhaiten soveltuvia tekniikoita. Seuraa jatkuvasti sovelluksesi suorituskykyä ja iteroi optimointistrategioitasi varmistaaksesi, että tarjoat parhaan mahdollisen käyttökokemuksen. Hyödynnä koodin pilkkomisen ja laiskan arvioinnin voima luodaksesi verkkosovelluksia, jotka eivät ole vain monipuolisia ominaisuuksiltaan, vaan myös suorituskykyisiä ja ilahduttavia käyttää kaikkialla maailmassa.

Lisätietolähteitä

• Webpack-dokumentaatio: https://webpack.js.org/
• Rollup-dokumentaatio: https://rollupjs.org/guide/en/
• Vite-dokumentaatio: https://vitejs.dev/
• MDN Web Docs - Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google Developers - Optimize JavaScript Execution: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/